<template>
  <div class="topPick">
    <div class="title">热门精选</div>
    <ul class="content">
      <li v-for="item in topPicks">
        <router-link :to="`/newsDetail?id=${item._id}`">
          <div class="news_title">{{item.title}}</div>
          <div class="news_info">
            <div class="left">
              <div class="author">{{item.author}}</div>
              <div class="time">{{item.date}}</div>
            </div>
            <div class="right">
              <div class="comment">
                <span class="el-icon-s-comment"></span>
                {{item.comments}}
              </div>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "TopPicks",
    data() {
      return {
        topPicks: []
      }
    },
    methods: {
      getList() {
        this.$store.dispatch('getNews')
          .then(() => {
            this.topPicks = this.$store.state.news
          })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style scoped lang="less">
  .topPick {
    margin-top: 30px;
    width: 100%;

    .title {
      font-size: 25px;
      font-weight: bold;
      color: #5184EB;
    }

    .content {
      margin-top: 30px;

      li {
        margin-top: 20px;
        font-size: 18px;
        border-bottom: 1px solid #999;

        .news_title {

        }

        .news_info {
          display: flex;
          justify-content: space-between;
          margin-top: 30px;
          padding: 0 20px 20px;

          .left {
            display: flex;
            justify-content: flex-start;
            color: #666;
            font-size: 14px;

            .author {
              margin-right: 30px;
            }

            .time {
            }
          }

          .right {
            .comment {
              color: #999999;
              font-size: 14px;
            }
          }
        }
      }
      li:hover .news_title{
        color: #5184EB;
      }
    }
  }
</style>